<template>
  <div class="backTop" v-if="scroll">
    <i class="fa fa-arrow-up" @click="backTop"></i>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        scroll: false
      }
    },
    methods: {
      backTop() {
        var top = document.body.scrollTop
        var speed = 50
        var timer = setInterval(() => {
          top -= speed
          document.body.scrollTop = top
          if (top <= 0) {
            top = 0
            clearInterval(timer)
          }
        }, 30)
      }
    },
      mounted() {
        var _this = this
        window.onscroll = function () {
          var top = document.body.scrollTop
          if (top > 300) {
            
            _this.scroll = true
          } else {
            _this.scroll = false
          }
        }
      }
    }
  

</script>
<style lang="">
  .backTop {
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 100;
  }
  
  .backTop i {
    font-size: 20px;
    display: inline-block;
    padding: 10px;
    border: 1px solid #ccc;
    color: white;
    border-radius: 50%;
    background-color: #ccc;
  }

</style>
